<template>
	<view>
		<input type="text" v-model="person.name"/>
	</view>
	
	{{person}}
</template>

<script setup>
import { ref, watch } from 'vue';
const person = ref({
	name:"张三",
	age:23
})

// person数据有改变就会触发这个函数
// newValue:这个是数据变化之后的新值
// oldValue:这个是数据变化之前的老值
// 这样的监听函数是浅的
// watch(person,(newValue,oldValue)=>{
// 	console.log(newValue);
// 	console.log(oldValue);
// })

// 下面两个都是深度监听
// watch(()=>person.value.name,(newValue,oldValue)=>{
// 	console.log(newValue);
// 	console.log(oldValue);
// })

// deep: true 强制开启监听模式
// immediate:true 开启立即保存
watch(person,(newValue)=>{
	console.log(newValue);
},{deep: true,immediate:true})
</script>

<style lang="scss" scoped>

</style>
